<template>
  <van-tabbar v-model="num">
    <van-tabbar-item @click="tab(0)" icon="shop">首页</van-tabbar-item>
    <van-tabbar-item @click="tab(1)" icon="chat" >分类</van-tabbar-item>
    <van-tabbar-item @click="tab(2)" icon="records" dot>订单</van-tabbar-item>
    <van-tabbar-item @click="tab(3)" icon="gold-coin" :info="carttip">购物车</van-tabbar-item>
    <van-tabbar-item @click="tab(4)" icon="gold-coin" info="20">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
  import store from '../../vuex/store'
  export default {
    name: "bottom-bar",
    data() {
      return {
        num:0,
        info: {}
      }
    },
    mounted:function(){

    },
    methods: {
      tab(index) {
        switch(index)
        {
          case 0:
            this.$router.push('/')
            break;
          case 1:
            this.$router.push('/category')
            break;
          case 2:
            this.$router.push('/order')
            break;
          case 3:
            this.$router.push('/cart')
            break;
          case 4:
            this.$router.push('/mine')
            break;
          default:
        }
        this.num=index
      }
    },
    computed: {
      carttip () {
        var goodarray= store.state.cart,
        n =0
        for (var i=0;i<goodarray.length;i++){
          n=n+goodarray[i].count
        }
        return n
      }
    }
  }
</script>

<style lang="less" scoped>
  .van-tabbar-item--active {
    color: @_green;
  }
  .bottom {
    height: 50px;
    width: 100%;
    border-top: 1px solid @_blk;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
  }

  .bottom div {
    width: 20%;
    text-align: center;
    float: left;
  }

  .bottom div i {
    display: block;
    font-size: 22px;
    margin: 5px auto;
  }

  a {
    color: @_blk;
  }
  .bot_act{
    color: @_green;
  }
</style>
